<template>
  <view class="repair-list-container">
    <!-- 顶部标签页 -->
    <view class="tab-header">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <view :id="'tab-content-' + index" class="tab-content">
          {{ tab.name }}<text class="count" v-if="tab.count">({{ tab.count }})</text>
        </view>
      </view>
    </view>

    <!-- 使用swiper实现内容区域的横向切换 -->
    <swiper
      class="swiper-content"
      :current="currentTab"
      @change="handleSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
    >
      <swiper-item v-for="(tab, index) in tabs" :key="index">
        <scroll-view 
          scroll-y 
          class="scroll-content"
          @scrolltolower="loadMore"
        >
          <!-- 报修列表 -->
          <view class="repair-list">
            <view class="repair-item" v-for="(item, idx) in getListByTab(index)" :key="idx">
              <!-- 报修信息 -->
              <view class="repair-info">
                <view class="repair-type">
                  <text class="type-name">{{ item.type }}</text>
                  <text class="repair-status" :class="item.status">{{ item.statusText }}</text>
                </view>
                <view class="repair-detail">
                  <text class="time">提单时间：{{ item.time }}</text>
                  <text class="order-no">报修单号：{{ item.orderNo }}</text>
                  <text class="station">报修单位：{{ item.station }}</text>
                </view>
                <view class="repair-person">
                  <text>维修员：{{ item.repairPerson }}</text>
                  <image class="phone-icon bg-color-1" src="/static/phone.png" mode="aspectFit"></image>
                </view>
                <view class="repair-company">
                  <text>维修服务商：{{ item.repairCompany }}</text>
                </view>
              </view>

              <!-- 底部按钮 -->
              <view class="action-buttons">
                <template v-if="item.status === 'waiting'">
                  <button class="btn modify-btn" @click="handleModify(item)">修改</button>
                </template>
                <template v-if="item.status === 'completed'">
                  <button class="btn review-btn" @click="handleReview(item)">申请售后</button>
                  <button class="btn rate-btn" @click="handleRate(item)">去评价</button>
                </template>
                <template v-if="item.status === 'repairing'">
                  <button class="btn sign-btn" @click="handleSign(item)">验收签字</button>
                </template>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'

// 标签页数据
const tabs = ref([
  { name: '全部', count: 17 },
  { name: '待维修', count: 5 },
  { name: '维修中', count: 1 },
  { name: '已完成', count: 12 }
])

const currentTab = ref(0)

// 报修列表数据
const repairList = ref([
  {
    type: '加油枪更换',
    status: 'repairing',
    statusText: '维修中',
    time: '2024-10-10 09:00',
    orderNo: 'ZSH1320001',
    station: '北京中石化后沙加油站',
    repairPerson: '张伟',
    repairCompany: '北京凯瑞嘉禾科技有限责任公司'
  },
  {
    type: '读卡器更换',
    status: 'waiting',
    statusText: '等待维修',
    time: '2024-8-10 09:00',
    orderNo: 'ZSH4320002',
    station: '北京中石化后沙加油站',
    repairPerson: '张伟',
    repairCompany: '北京凯瑞嘉禾科技有限责任公司'
  },
  {
    type: '读卡器更换',
    status: 'completed',
    statusText: '已完成',
    time: '2024-8-10 09:00',
    orderNo: 'ZSH4320001',
    station: '北京中石化后沙加油站',
    repairPerson: '张伟',
    repairCompany: '北京凯瑞嘉禾科技有限责任公司'
  }
])

// 新增 swiper 高度控制
const swiperHeight = ref(10)

// 添加文字宽度计算相关的响应式变量
const tabRefs = ref([])
const indicatorWidth = ref(40)

// 计算当前标签对应的列表数据
const getListByTab = (tabIndex) => {
  if (tabIndex === 0) return repairList.value
  const statusMap = ['', 'waiting', 'repairing', 'completed']
  return repairList.value.filter(item => item.status === statusMap[tabIndex])
}

// 处理 swiper 切换事件
const handleSwiperChange = (e) => {
  currentTab.value = e.detail.current
  updateIndicatorWidth(e.detail.current)
}

// 切换标签
const switchTab = (index) => {
  currentTab.value = index
  updateIndicatorWidth(index)
}

// 加载更多数据
const loadMore = () => {
  // 实现加载更多逻辑
  console.log('加载更多数据')
}

// 计算 swiper 高度
onMounted(async () => {
  const systemInfo = uni.getSystemInfoSync()
  // 减去顶部标签栏高度和状态栏高度
  swiperHeight.value = systemInfo.windowHeight - 100
  
  // 等待DOM更新后计算文字宽度
  await nextTick()
  updateIndicatorWidth(currentTab.value)
})

// 修改计算指示器宽度的方法
const updateIndicatorWidth = (index) => {
  // 获取当前选中tab的整个内容节点
  const query = uni.createSelectorQuery()
  query.select(`#tab-content-${index}`).boundingClientRect(data => {
    if (data) {
      indicatorWidth.value = data.width
    }
  }).exec()
}

// 按钮点击处理函数
const handleModify = (item) => {
  // 跳转到报修单详情页，并传递报修单号
  uni.navigateTo({
    url: `/pages/service/repair-detail?orderNo=${item.orderNo}`
  })
}

const handleReview = (item) => {
  // 跳转到报修单详情页的维修详情tab
  uni.navigateTo({
    url: `/pages/service/repair-detail?orderNo=${item.orderNo}&tab=1`
  })
}

const handleRate = (item) => {
  // 跳转到报修单详情页的维修详情tab
  uni.navigateTo({
    url: `/pages/service/repair-detail?orderNo=${item.orderNo}&tab=1`
  })
}

const handleSign = (item) => {
  // 跳转到报修单详情页的维修详情tab
  uni.navigateTo({
    url: `/pages/service/repair-detail?orderNo=${item.orderNo}&tab=1`
  })
}
</script>

<style>
.repair-list-container {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 20rpx;
}

/* 标签页样式 */
.tab-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #FFFFFF;
  display: flex;
  width: 100%;
  height: 80rpx;
  position: relative;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

.tab-content {
  position: relative;
  display: inline-block;
  text-align: center;
}

.count {
  font-size: 24rpx;
  margin-left: 4rpx;
}

.tab-item.active {
  color: #1890FF;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: v-bind(indicatorWidth + 'px');
  height: 4rpx;
  background: #1890FF;
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

/* 报修列表样式 */
.repair-list {
  padding: 20rpx;
}

.repair-item {
  background: #FFFFFF;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.repair-info {
  padding: 20rpx;
}

.repair-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.type-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.repair-status {
  font-size: 28rpx;
}

.repair-status.waiting {
  color: #FF9800;
}

.repair-status.repairing {
  color: #1890FF;
}

.repair-status.completed {
  color: #52C41A;
}

.repair-detail {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.repair-detail text {
  font-size: 24rpx;
  color: #666666;
}

.repair-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.repair-person text {
  font-size: 28rpx;
  color: #333333;
}

.phone-icon {
  width: 40rpx;
  height: 40rpx;
}

.repair-company text {
  font-size: 24rpx;
  color: #666666;
}

/* 底部按钮样式 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx;
  border-top: 1rpx solid #EEEEEE;
  gap: 20rpx;
}

.btn {
  padding: 10rpx 30rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  background: #FFFFFF;
}

.modify-btn {
  color: #1890FF;
  border: 1rpx solid #1890FF;
}

.review-btn {
  color: #1890FF;
  border: 1rpx solid #1890FF;
}

.rate-btn {
  color: #52C41A;
  border: 1rpx solid #52C41A;
}

.sign-btn {
  color: #1890FF;
  border: 1rpx solid #1890FF;
}

/* 背景色 */
.bg-color-1 {
  background-color: #1890FF;
}

.bg-color-2 {
  background-color: #F5F5F5;
}

/* 新增以下样式 */
.swiper-content {
  width: 100%;
}

.scroll-content {
  height: 100%;
}
</style> 